import QtQuick 2.0
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ListView {
    id: listView

    signal clicked(int index)

    property Component component: null
    property color backgroundColor: "thistle"
    property color rowColor: "whitesmoke"
    clip: true
    property int rowHeight: 64 * factor

    delegate:  Rectangle {
        id: wrapper
        width: listView.width
        height: listView.rowHeight
        color: wrapper.ListView.isCurrentItem ? "transparent" : listView.rowColor
        Loader{
            id: loader
            property var __model: model
            sourceComponent: component
        }

        states: State {
            name: "Current"
            when: wrapper.ListView.isCurrentItem
            PropertyChanges { target: wrapper; x: 24 * factor }

        }

        transitions: Transition {
            NumberAnimation { properties: "x"; duration: 200 }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {wrapper.ListView.view.currentIndex = index
                listView.clicked(index);
            }
        }
    }

    highlight:  Item {
        width: listView.width ; height: listView.rowHeight
        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            height: parent.height
            width: parent.width
            color: listView.backgroundColor;
            y: listView.currentItem.y

            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }
    highlightFollowsCurrentItem: false
}

